<template>
  <!--content-->
  <div class="content">
    <ul class="yifu">
      <div class="first">服饰</div>
      <li class="l_left" v-for="(n,index) in datas" @click="sendidx(index)">
          <img :src="n.img1" alt="">
          <span>{{n.mainname}}</span>
          <i class="iconfont icon-mjiantou"></i>
      </li>
    </ul>
    <ul class="xiezi">
      <div class="first">鞋履</div>
      <li class="l_left" v-for="t in shoedatas">
        <img :src="t.img1" alt="">
        <span>{{t.mainname}}</span>
        <i class="iconfont icon-mjiantou"></i>
      </li>
    </ul>
  </div>
</template>
<script type="text/ecmascript-6">
    export default {
      props:["datas","shoedatas"],
      methods:{
        sendidx:function(id){
          this.$router.push("/ShopDetail?id="+id)
        },
      }
    }
</script>
<style scoped lang="scss">
  //content
  .content{
    flex:1;
    overflow-x: hidden;
    overflow-y: scroll;
    font-size:16px;
  }
  .content>ul{
    background: white;
    overflow: hidden;
  }
  .content>ul>li{
    display: flex;
    border-bottom: 1px solid #dedfde;
    font-weight:bold;
    width:49.5%;
    float: left;
    padding:0.1rem 0;
  }
  .content i{
    color: #ef045a;
    margin-left:0.05rem;
  }
  .first{
    font-family: serif;
    font-size: 18px;
    padding:0.15rem;
    border-bottom: 1px solid #dedfde;
  }
  .l_left>img{
    width:50%;
    height:100%;
    margin-right:0.1rem;
    margin-left: 0.1rem;
  }
 .content>ul>li:nth-child(even) {
   border-right:1px solid #dedfde;
  }
  .l_left span{
    margin-top:25%;
  }
  .l_left i{
    margin-top:27%;
  }
</style>
